<template>
	<view class="">
		<cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="false">
			<block slot="content">登录</block>
		</cu-custom>
		
		<view class="login">
			<view class="top">
				<view class="title f36 text-bold">获取您的昵称、头像、手机号</view>
				<view class="tips mt12 text-gray f26"
					>获取用户头像、昵称、手机号完善个人资料，主要用于向用户提供具有辨识度的用户中心界面</view
				>
			</view>
			<view class="info">
				<view class="item">
					<view class="label f36 mr50">头像</view>

					<view class="content">
						<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<view v-if="!userInfo.headimgUrl" class="avtar cuIcon-add"></view>
							<image
								v-else
								class="avatar cu-avatar radius avatar-login"
								:src="userInfo.headimgUrl"></image>
						</button>
						<view class="ml30 text-gary">(点击'+'获取头像)</view>
					</view>
				</view>
				<view class="item mt60" style="height: 100rpx">
					<view class="label f36 mr50">昵称</view>
					<view class="content flex1" style="height: 100%">
						<input
							class="input"
							placeholder="点击此处获取昵称"
							type="nickname"
							v-model="userInfo.nickName" />
					</view>
				</view>
			</view>
			<view class="login-bth">
				<button
					class="btn margin-tb-sm lg"
					:class="'bg-' + theme.backgroundColor"
					open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">
					一键登录
				</button>
				<!-- <view class="margin-tb-sm lg text-center text-red" @tap.stop="$goUrl('/pages/home/index', 3)">暂不登录</view> -->
			</view>
		</view>
	</view>
</template>
<script>
const app = getApp();
import __config from "config/env";
const util = require("utils/util.js");
import api from "utils/api";

export default {
	props: {
		reUrl: {
			type: String,
			default: "",
		},
	},
	data() {
		return {
			theme: app.globalData.theme,
			userInfo: {
				headimgUrl: "",
				nickName: "",
				sex: "3",
			},
		};
	},
	methods: {
		onChooseAvatar(e) {
			let imgUrl = e.detail.avatarUrl;
			this.uploadAvatar(imgUrl);
		},
		uploadAvatar(filePath) {
			// 上传头像
			let _url = "/liveapi/file/upload";
			//#ifndef H5
			_url = __config.basePath + _url;
			//#endif
			let that = this;
			uni.showLoading({
				title: "上传中",
			});
			uni.uploadFile({
				header: {
					//#ifdef H5
					"client-type": util.isWeiXinBrowser() ? "H5-WX" : "H5", //客户端类型普通H5或微信H5
					"tenant-id": getApp().globalData.tenantId,
					"app-id": getApp().globalData.appId ? getApp().globalData.appId : "", //微信h5有appId
					//#endif
					//#ifdef MP-WEIXIN
					"client-type": "MA", //客户端类型小程序
					"app-id": uni.getAccountInfoSync().miniProgram.appId, //小程序appId
					//#endif
					//#ifdef APP-PLUS
					"client-type": "APP", //客户端类型APP
					"tenant-id": getApp().globalData.tenantId,
					//#endif
					"third-session": uni.getStorageSync("third_session")
						? uni.getStorageSync("third_session")
						: "",
				},
				url: _url,
				filePath: filePath,
				name: "file",
				formData: {
					fileType: "image",
					dir: "headimg/",
				},
				success: (uploadFileRes) => {
					if (uploadFileRes.statusCode == "200") {
						that.userInfo.headimgUrl = JSON.parse(uploadFileRes.data).link;
					} else {
						uni.showModal({
							title: "提示",
							content: "上传失败：" + uploadFileRes.data,
							success(res) {},
						});
					}
				},
				fail: (err) => {
					console.log(err);
				},
				complete: () => {
					uni.hideLoading();
				},
			});
		},
		getPhoneNumber(e) {
			if (!this.userInfo.headimgUrl) {
				uni.showToast({
					title: "请上传头像",
					icon: "none",
					duration: 3000,
				});
				return;
			}
			if (!this.userInfo.nickName) {
				uni.showToast({
					title: "请填写昵称",
					icon: "none",
					duration: 3000,
				});
				return;
			}
			if (e.detail.encryptedData) {
				api.loginByPhoneMa(e.detail).then((res) => {
					let userInfo = res.data;
					uni.setStorageSync("third_session", userInfo.thirdSession);
					uni.setStorageSync("user_info", userInfo);
					//登录完成跳到首页
					api
						.userInfoUpdate({
							id: userInfo.id,
							nickName: this.userInfo.nickName,
							sex: this.userInfo.sex,
							headimgUrl: this.userInfo.headimgUrl,
						})
						.then((res) => {
							uni.showToast({
								title: "操作成功",
								type: "success",
							});
							uni.reLaunch({
								url: this.reUrl ? decodeURIComponent(this.reUrl) : "/pages/home/index",
							});
						});
				});
			}
		},
	},
};
</script>
<style lang="scss" scoped>
.login {
	padding: 100rpx 64rpx;
	background-color: #fff;
	min-height: calc(100vh - 94px);
	.tips {
		line-height: 1.5em;
	}
	.info {
		margin-top: 100rpx;
		.item {
			display: flex;
			align-items: center;
			.content {
				display: flex;
				align-items: center;
				.input {
					width: 100%;
					height: 100%;
					background-color: #f4f4f4;
					display: flex;
					border-radius: 50rpx;
					padding: 0 20rpx;
				}
				.avtar {
					width: 100rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					border: 4rpx dashed #333;
				}
			}
		}
	}
}
.chooseAvatar {
	padding: 0;
	background-color: transparent;
	border: none;
}
.avatar-login {
	width: 108rpx;
	height: 108rpx;
	border-radius: 50%;
}
.login-bth {
	position: absolute;
	bottom: 48rpx;
	left: 32rpx;
	right: 32rpx;
	.btn {
		width: 100%;
	}
}
</style>
